<template>
  <div style="height:460px">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="searchForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <!-- 编码 -->
        <Form-item prop="dimensionDataCode" :label="$t('module.dimension.code')">
          <Input 
          type="text" 
          :maxlength="30"
          v-model="searchForm.dimensionDataCode" 
          @on-enter="search" 
          :placeholder="$t('module.dimension.warning.enterCode')"/>
        </Form-item>
        <!-- 名称 -->
        <Form-item prop="dimensionDataName" :label="$t('module.dimension.name')">
          <Input 
          type="text" 
          :maxlength="30" 
          v-model="searchForm.dimensionDataName"
          @on-enter="search" 
          :placeholder="$t('module.dimension.warning.enterName')"/>
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">  
          <RPButton optType="search" @click="search" />
          <RPButton optType="reset" @click="reset" />
        </Form-item>

      </Form>
    </SelfAdaption>
    <InnerPageTable ref="listDataTable" :config="tableConfig"> 
      <!--
      <div slot="handle-bar">
        <RPButton optType="search" @click="search" />
        <RPButton optType="reset" @click="reset" />
      </div>
      -->
    </InnerPageTable>
  </div>
</template>
<script>
import dataPermissionAPI from "@/api/dataPermissionAPI.js";
import { selectDimensionDataColumns } from "./columns.js";
import locales from "./locales.js";

export default {
  mixins: [locales],
  props: {
    tenantCode: { type: String, required: true },
    assignmentId: String,
    dimensionCode: String
  },
  data() {
    return {
      searchForm: {
        tenantCode: this.tenantCode,
        assignmentId: this.assignmentId,
        dimensionCode: this.dimensionCode,
        dimensionDataCode: "",
        dimensionDataName: ""
      },
      resource: [],
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => {
            this.save();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    };
  },
  computed: {
    tableConfig() {
      return {
        loadDataFn: ({ responseProcess, param }) => {
          dataPermissionAPI.queryListDimensionData(param).then(data => {
            responseProcess(data);
          });
        },
        initParam: this.searchForm,
        columnsFn: selectDimensionDataColumns.bind(this),
        autoFirst: true
      };
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$emit("SetTitle", this.$t("module.dataPermission.warning.selectData"));
      this.$emit("SetPageWidth", 850);
      this.$emit("SetPageActions", this.actions);
    },
    search(page) {
      this.$refs["listDataTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["searchForm"].resetFields();
      this.search(1);
    },
    save() {
      // 如果未勾选，无需保存
      let selectioned = this.$refs["listDataTable"].getSelectioned() || [];
      if (selectioned.length == 0) {
        this.$message.error({
          content: this.$t("module.dataPermission.warning.selectData"),
          duration: 3
        });
        return;
      }
      let param = {
        assignmentId: this.assignmentId,
        dimensionDataList: selectioned
      };
      this.actions[0].loading = true
      dataPermissionAPI.saveAssignedListDimensionData(param).then(data => {
        this.$message.success({
          content: this.$t("module.dataPermission.warning.assignDataSuccessfully"),
          duration: 3
        });
        this.$emit("Close", true);
      })
      .catch(() => {
        this.actions[0].loading = false
      })
    }
  },
  watch: {},
  directives: {}
};
</script>
